<template>
  <div>
    <Tabs :tabs="tabs" @tabsItemChange="onTabsItemChange">
      <div class="collect_main" slot="content">
        <!-- tips -->
        <div class="collect_title">
          <span class="collect_tips active">全部</span>
          <span class="collect_tips">热卖</span>
          <span class="collect_tips">即将上线</span>
        </div>
        <!-- 收藏列表 -->
        <div class="collect_content">
          <div class="collect_main">
            <!-- 每项 -->
            <div class="collect_item" v-for="(item,index) in collectList" :key="index">
              <!-- 图片 -->
              <div class="collect_pic">
                <router-link :to="'/goodsdetail/'+item.goods_id">
                  <img :src="item.goods_small_logo" />
                </router-link>
              </div>
              <!-- 商品信息 -->
              <div class="collect_info">
                <div class="goods_name">{{item.goods_name}}</div>
                <div class="goods_price">${{item.goods_price}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Tabs>
  </div>
</template>

<script>
import Tabs from '../components/Tabs'

export default {
  components: { Tabs },
  data() {
    return {
      tabs: [
        { id: 0, value: '商品收藏', isActive: true },
        { id: 1, value: '店铺收藏', isActive: false },
        { id: 2, value: '喜欢', isActive: false },
        { id: 3, value: '浏览足迹', isActive: false }
      ],
      collectList: []
    }
  },
  methods: {
    onTabsItemChange(index) {
      this.tabs.forEach((v, i) => {
        i === index ? (v.isActive = true) : (v.isActive = false)
      })
    }
  },
  created() {
    this.collectList = JSON.parse(localStorage.getItem('collectList'))
  }
}
</script>

<style lang='less' scope>
/* pages/order/order.wxss */
.order_wrap {
  .order_item {
    padding: 10px;

    .order_row {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 5px 0;

      .left {
        flex: 2;
      }

      .right {
        flex: 5;
        text-align: right;
      }

      .price {
        color: var(--themeColor);
        font-size: 16px;
        font-weight: 600;
      }
    }
  }
}

.collect_main {
  background-color: #eee;

  .collect_title {
    padding: 20px 0;

    .collect_tips {
      padding: 8px;
      border: 1px solid #eee;
      margin-left: 8px;
      background-color: #fff;
    }

    .active {
      border: 1px solid var(--themeColor);
    }
  }

  .collect_content {
    .collect_main {
      width: 100%;

      .collect_item {
        padding: 10px;
        display: flex;
        border-bottom: 1px solid #ccc;
        background-color: #fff;

        .collect_pic {
          flex: 2;
          display: flex;
          flex-direction: column;
          justify-content: center;

          img {
            width: 80%;
          }
        }

        .collect_info {
          flex: 4;
          display: flex;
          // 上下排
          flex-direction: column;
          justify-content: space-around;
          align-items: center;

          // 上 - 名字
          .goods_name {
            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            color: #666;
          }

          // 价格数字
          .goods_price {
            color: var(--themeColor);
            font-size: 17px;
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
